当我们获得了某个DOM节点，想在这个DOM节点内插入新的DOM，应该如何做？

如果这个DOM节点是空的，例如，，那么，直接使用innerHTML = 'child'就可以修改DOM节点的内容，相当于“插入”了新的DOM节点。

如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替换掉原来的所有子节点。

有两个办法可以插入新的节点。一个是使用appendChild，把一个子节点添加到父节点的最后一个子节点。例如：

JavaScript

Java

Python

Scheme

把

JavaScript

现在，HTML结构变成了这样：

Java

Python

Scheme

JavaScript

因为我们插入的js节点已经存在于当前的文档树，因此这个节点首先会从原先的位置删除，再插入到新的位置。

更多的时候我们会从零创建一个新的节点，然后插入到指定位置：

这样我们就动态添加了一个新的节点：

Java

Python

Scheme

Haskell

动态创建一个节点然后添加到DOM树中，可以实现很多功能。举个例子，下面的代码动态创建了一个节点，然后把它添加到节点的末尾，这样就动态地给文档添加了新的CSS定义：

可以在Chrome的控制台执行上述代码，观察页面样式的变化。

如果我们要把子节点插入到指定的位置怎么办？可以使用parentElement.insertBefore(newElement, referenceElement);，子节点会插入到referenceElement之前。

还是以上面的HTML为例，假定我们要把Haskell插入到Python之前：

Java

Python

Scheme

可以这么写：

新的HTML结构如下：

Java

Haskell

Python

Scheme

可见，使用insertBefore重点是要拿到一个“参考子节点”的引用。很多时候，需要循环一个父节点的所有子节点，可以通过迭代children属性实现：

对于一个已有的HTML结构：

按字符串顺序重新排序DOM节点：